/**
 * Created by zhaoxk on 2017/2/24.
 * 患者信息是个对象，为保证顺序可控，单独定义了这个组件渲染患者信息
 */
import React from 'react';
import { isArray, map } from 'lodash';
import styles from './index.less';
/*
 * data 数据源
 * align 对其方向，默认靠右对齐
 * labelWidth 标题宽度，默认2rem，在这个工程里≈200px
 * normalize 序列化数据的设置，有可能将一个对象作为数据源传入，这时数据无序，无label，所以需要这个配置
 *           这个配置是个数组，其中每个元素都是长度至少为2的数组
 *           0号位是字段名，1号位是对应的label名称
 *           2号位是转换值的方法，参数是value，返回值是转换过的结果
 * */
function InlineList({
                        data,
                        align = 'right',
                        labelWidth = '200px',
                        normalize,
                        noneData = null,
                    }) {
    if (!data || data.length < 1) {
        return noneData;
    }
    if (normalize && !isArray(normalize)) {
        throw new Error('normalize参数必须是个数组，结构如下：[["foo", "bar"], ["abc", "def"], ...]');
    }
    let result = [];
    if ((normalize && isArray(normalize)) && !isArray(data)) {
        result = map(normalize, (n) => {
            const trsformValue = n[2];
            const value = typeof trsformValue === 'function' ? trsformValue(data[n[0]]) : data[n[0]];
            return {
                code: n[0],
                label: n[1],
                value,
            };
        });
    } else {
        result = data;
    }
    const items = map(result, (d, i) => (
        <li
            key={`item_${d.code}_${i}`}
            style={{
                textAlign: align,
                paddingLeft: labelWidth,
            }}
        >
            <span
                style={{
                    width: labelWidth
                }}
            >
                {d.label}
            </span>
            {d.value}
        </li>
    ));
    return (
        <ul className={styles.normal}>
            {items}
        </ul>
    );
}

export default InlineList;
